$dark_gray: #889aa4;

.login-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: stretch;
  justify-content: center;

  .login-left {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
      max-width: 800px;
      height: auto;
      object-fit: cover;
    }
  }

  .login-content {
    width: 40%;
    max-width: 480px;
    min-width: 400px;
    max-height: 80vh; // 设置最大高度为视口高度的80%
    padding: 25px 20px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-sizing: border-box;
    position: relative;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center; // 纵向居中
    align-items: center; // 横向居中
    overflow-y: auto; // 允许垂直滚动
    margin: auto 0; // 确保在父容器中垂直居中

    .info-qrcode {
      width: 150px;
      height: 40px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      position: absolute;
      top: -60px;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #1492ff;
      font-size: 16px;
      &::after {
        content: "";
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 10px;
        height: 26px;
        border-top: 13px solid #fff;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 13px solid transparent;
        position: absolute;
        top: 40px;
        right: 16px;
      }
    }

    .captcha {
      position: absolute;
      top: 0;
      right: 0;

      .captcha-image {
        margin: 2px 10px 2px 2px;
        height: 35px;
        width: 120px;
      }
    }
  }

  .login-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    .title {
      margin: 0px 20px;
      font-size: 26px;
      white-space: nowrap;
    }
    .icon {
      width: 45px;
    }
  }

  ::v-deep(.el-input__inner) {
    height: 40px;
  }
}

.login-btn {
  margin-top: 12px;
  width: 100%;
  height: 42px;
}

.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
  ::v-deep(.svg-icon) {
    vertical-align: 0;
  }
}

.login-container {
  background-color: #f0f2f5;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px;
  box-sizing: border-box;
}

.login-dark {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 10;
}

.qrcode {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  width: 30px;
}

// 第三方登录样式优化
.third-party-login {
  margin-top: 12px;
  width: 100%;

  .divider {
    display: flex;
    align-items: center;
    margin: 8px 0;

    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #dcdfe6;
    }

    .divider-text {
      padding: 0 12px;
      color: #909399;
      font-size: 12px;
    }
  }

  .login-methods {
    padding: 0 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    > img {
      width: 30px;
      height: 30px;
    }
  }
}

// ICP备案样式优化
.icp-footer {
  margin-top: 12px;
  width: 100%;
  text-align: center;

  p {
    margin: 1px 0;
    color: #909399;
    font-size: 9px;
    line-height: 1.1;
  }
}

// 响应式设计优化
@media (max-width: 1200px) {
  .login-box {
    .login-left {
      width: 55%;
    }
    .login-content {
      width: 45%;
      max-width: 450px;
      max-height: 85vh; // 中等屏幕时稍微增加最大高度
      padding: 20px 18px;
    }
  }
}

@media (max-width: 1000px) {
  .login-box {
    .login-left {
      width: 50%;
    }
    .login-content {
      width: 50%;
      max-width: 420px;
      max-height: 90vh; // 小屏幕时进一步增加最大高度
      padding: 18px 15px;
    }
  }
}

@media (max-width: 850px) {
  .login-container {
    padding: 15px;
  }

  .login-box {
    flex-direction: column;
    height: auto;
    min-height: 100vh;

    .login-left {
      width: 100%;
      height: 160px;
      order: 2;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .login-content {
      width: 100%;
      max-width: 400px;
      min-width: 320px;
      max-height: none; // 移动端取消最大高度限制
      padding: 20px 18px;
      margin: 12px auto;
      border-radius: 8px;
      order: 1;

      .title {
        font-size: 20px;
      }
    }
  }

  .third-party-login {
    margin-top: 10px;

    .divider {
      margin: 6px 0;

      .divider-text {
        font-size: 11px;
      }
    }

    .login-methods {
      gap: 12px;
      margin-top: 6px;
    }
  }

  .icp-footer {
    margin-top: 10px;

    p {
      font-size: 8px;
    }
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 10px;
  }

  .login-box {
    .login-content {
      padding: 18px 12px;
      border-radius: 6px;

      .title {
        font-size: 16px;
      }
    }

    .login-left {
      height: 120px;
    }
  }

  .third-party-login {
    margin-top: 8px;

    .divider {
      margin: 4px 0;

      .divider-text {
        font-size: 10px;
        padding: 0 8px;
      }
    }

    .login-methods {
      gap: 8px;
      margin-top: 4px;
    }
  }

  .icp-footer {
    margin-top: 8px;

    p {
      font-size: 7px;
    }
  }
}
